import React, { useMemo } from 'react'
import { gql, useLazyQuery } from '@apollo/client';
import { TableProps, Space, Button, Table } from 'antd';

const AccountListGql = gql`
  query AccountList { # 定义查询方法(浏览器上显示的)
    accountList { # 定义与后端对接的方法名
      id
      username
      password
    }
  }
`;

export const Page3: React.FC = () => {
  const [getAccount, { loading, data }] = useLazyQuery(AccountListGql);
  const accountList = useMemo(() => {
    return data?.accountList || []
  }, [data])
  if (loading) return null;

const columns: TableProps<any>['columns'] = [
   {
       title: 'ID',
       dataIndex: 'id'
   },{
       title: '用户名',
       dataIndex: 'username'
   },
   {
      title: '密码',
      dataIndex: 'password'
  },
  {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button>编辑</Button>
          <Button danger >删除</Button>
        </Space>
      ),
    },
]
  return (
    <div>
      点击按钮请求数据
      <button onClick={() => getAccount()}>点击按钮</button>
      <Table rowKey='id' loading={loading} dataSource={accountList} columns={columns}>
     </Table>
    </div>
  )
}